import React from 'react';
import {
  Route,
  Link
} from "react-router-dom";

import ReactPage from './react'
import VuePage from './vue'
import FlutterPage from './flutter'

export default function Index() {
  return (
    <div className="video-page">
      <div className="links-wrap __vertical">
        <h3>二级导航：视频教程</h3>
        <ul>
          <li><Link to="/video/react">React 教程</Link></li>
          <li><Link to="/video/vue">Vue 教程</Link></li>
          <li><Link to="/video/flutter">Flutter 教程</Link></li>
        </ul>
      </div>


      <div className="page-content">
        <h3>二级路由：</h3>
        <Route path="/video/react" component={ReactPage}/>
        <Route path="/video/vue" component={VuePage}/>
        <Route path="/video/flutter" component={FlutterPage}/>
      </div>
    </div>
  )
}
